/* eslint-disable max-lines */
import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table, Collapse} from 'antd';
import {TABLE, DATE_FORMAT, DATETIME_FORMAT, FILES_API} from '../constants';
import {conventEnumValueToString, formatDateTime} from '../utils';
import {kDClaimType, claimCompensationWay, urgencyLevel, kDClaimStatus, claimPartType, claimTransportType} from '../Enum';
import {hasPermissions} from './utils';
import {PERMISSION} from './constants';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import {submitData, abandonData} from './api';
import styles from './style.css';
import routes from './routes';
const {Panel} = Collapse;
const {Description} = DescriptionList;
const basePath = fetch.basePath || '';
const url = '/#/dcs/sales/saleProformaInvoiceKd/add';

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
    };
    componentDidMount() {
        this.props.init();
    }
    handleUpdateClick = () => {
        this.props.history.push(routes.update.format(this.props.id));
    }
    handleApproveClick = () => {
        this.props.history.push(routes.approve.format(this.props.id));
    }
    handleFirstApproveClick = () => {
        this.props.history.push(routes.firstapprove.format(this.props.id));
    }
    handlePartclaimClick = () => {
        this.props.history.push(routes.partclaim.format(this.props.id));
    }
    handleReasonClick = () => {
        this.props.history.push(routes.reason.format(this.props.id));
    }
    handleUpgradeClick = () => {
        this.props.history.push(routes.upgrade.format(this.props.id));
    }
    submitConfirm = () => {
        this.setState({loading: true});
        const rowVersion = this.props.detail.rowVersion;
        submitData(this.props.detail.id, rowVersion)
            .then(res => {
                this.setState({loading: false});
                if(res.ok)
                    this.props.successReturn();
            });
    }
    abandonConfirm = () => {
        this.setState({loading: true});
        const rowVersion = this.props.detail.rowVersion;
        abandonData(this.props.detail.id, rowVersion)
            .then(res => {
                this.setState({loading: false});
                if(res.ok)
                    this.props.successReturn();
            });
    }
    render() {
        const detailData = this.props.detail || {};
        const {options, details = [], claimDetails = [], shippingDetails = []} = detailData;
        const {formatMessage} = this.props.intl;
        const operations = [];
        if(hasPermissions(this.props.permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(<Button key="update" onClick={this.handleUpdateClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.edit',
                    defaultMessage: '编辑'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.submit) && hasPermissions(options, PERMISSION.submit))
            operations.push(
                <WrappedPopconfirm
                    id="submit"
                    key="submit"
                    title={formatMessage({
                        id: 'detailPanel.popconfirm.message',
                        defaultMessage: '是否继续?'
                    })}
                    onConfirm={this.submitConfirm}>
                    <Button key="submit" size="small">{
                        formatMessage({
                            id: 'detailPanel.btn.submit',
                            defaultMessage: '提交'
                        })
                    }</Button>
                </WrappedPopconfirm>);
        if(hasPermissions(this.props.permissions, PERMISSION.firstapprove) && hasPermissions(options, PERMISSION.firstapprove))
            operations.push(<Button key="firstapprove" onClick={this.handleFirstApproveClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.firstapprove',
                    defaultMessage: '初审'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.approve) && hasPermissions(options, PERMISSION.approve))
            operations.push(<Button key="approve" onClick={this.handleApproveClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.approve',
                    defaultMessage: '复审'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.partclaim) && hasPermissions(options, PERMISSION.partclaim))
            operations.push(<Button key="partclaim" onClick={this.handlePartclaimClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.partclaim',
                    defaultMessage: '零件赔付'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.reason) && hasPermissions(options, PERMISSION.reason))
            operations.push(<Button key="reason" onClick={this.handleReasonClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.reason',
                    defaultMessage: '原因分析'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.upgrade) && hasPermissions(options, PERMISSION.upgrade))
            operations.push(<Button key="upgrade" onClick={this.handleUpgradeClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.upgrade',
                    defaultMessage: '升级讨论'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.laborhourclaim) && hasPermissions(options, PERMISSION.laborhourclaim))
            operations.push(<Button key="laborhourclaim" href={`${basePath}${url}?id=${this.props.id}`} target="_blank" size="small">{
                formatMessage({
                    id: 'detailPanel.laborhourclaim',
                    defaultMessage: '工时赔付'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.abandon) && hasPermissions(options, PERMISSION.abandon))
            operations.push(
                <WrappedPopconfirm
                    id="abandon"
                    key="abandon"
                    title={formatMessage({
                        id: 'detailPanel.popconfirm.message',
                        defaultMessage: '是否继续?'
                    })}
                    onConfirm={this.abandonConfirm}>
                    <Button key="abandon" size="small">{
                        formatMessage({
                            id: 'detailPanel.btn.abandon',
                            defaultMessage: '作废'
                        })
                    }</Button>
                </WrappedPopconfirm>);
        const partColumns = [{
            title: formatMessage({
                id: 'detailPanel.column.shipPartCode',
                defaultMessage: '发运单零件号'
            }),
            dataIndex: 'shipPartCode',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.shipPartName',
                defaultMessage: '发运零件名称'
            }),
            dataIndex: 'shipPartName',
        }, {
            title: formatMessage({
                id: 'detailPanel.colums.quantity',
                defaultMessage: '索赔数量'
            }),
            dataIndex: 'quantity'
        }, {
            title: formatMessage({
                id: 'detailPanel.column.partCodeAfter',
                defaultMessage: '更改后零件号'
            }),
            dataIndex: 'partCodeAfter',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.partNameAfter',
                defaultMessage: '更改后零件名称'
            }),
            dataIndex: 'partNameAfter',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.isFromKDBOM',
                defaultMessage: '是否来自KDBOM'
            }),
            dataIndex: 'isFromKDBOM',
            render: text => text ? formatMessage({
                id: 'detailPanel.column.y',
                defaultMessage: '是'
            }) : formatMessage({
                id: 'detailPanel.column.n',
                defaultMessage: '否'
            }),
        }, {
            title: formatMessage({
                id: 'detailPanel.column.isSubPart',
                defaultMessage: '是否SUB件'
            }),
            dataIndex: 'isSubPart',
            render: text => text ? formatMessage({
                id: 'detailPanel.column.y',
                defaultMessage: '是'
            }) : formatMessage({
                id: 'detailPanel.column.n',
                defaultMessage: '否'
            }),
        }, {
            title: formatMessage({
                id: 'detailPanel.column.supplierCode',
                defaultMessage: '供应商代码'
            }),
            dataIndex: 'supplierCode',
        }];
        return (
            <div className="detail">
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.claimTitle',
                            defaultMessage: '索赔信息'
                        })
                    }</Col>
                    <Col className={`col-align-right ${styles.detail}`} span={12}>{operations}</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.code',
                            defaultMessage: '申请单号',
                        })}>{this.props.detail.code}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.brandName',
                            defaultMessage: '品牌名称',
                        })}>{this.props.detail.brandName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.dealerCode',
                            defaultMessage: '总代编号',
                        })}>{this.props.detail.dealerCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.dealerName',
                            defaultMessage: '总代名称',
                        })}>{this.props.detail.dealerName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.country',
                            defaultMessage: '国家',
                        })}>{this.props.detail.country}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.contactNumber',
                            defaultMessage: '联系电话',
                        })}>{this.props.detail.contactNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.claimType',
                            defaultMessage: '索赔类型'
                        })}>{conventEnumValueToString(kDClaimType, this.props.detail.claimType)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.claimPartType',
                            defaultMessage: '索赔配件类型'
                        })}>{conventEnumValueToString(claimPartType, this.props.detail.claimPartType)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.saleShipmentCode',
                            defaultMessage: '发运单编号',
                        })}>{this.props.detail.saleShipmentCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.batchNumber',
                            defaultMessage: '批次号',
                        })}>{this.props.detail.batchNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.urgencyLevel',
                            defaultMessage: '紧急程度'
                        })}>{conventEnumValueToString(urgencyLevel, this.props.detail.urgencyLevel)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.requireCompensationWay',
                            defaultMessage: '需求赔付方式'
                        })}>{conventEnumValueToString(claimCompensationWay, this.props.detail.requireCompensationWay)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.requireTransportType',
                            defaultMessage: '需求运输方式'
                        })}>{conventEnumValueToString(claimTransportType, this.props.detail.requireTransportType)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.actualCompensationWay',
                            defaultMessage: '实际赔付方式'
                        })}>{conventEnumValueToString(claimCompensationWay, this.props.detail.actualCompensationWay)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.actualTransportType',
                            defaultMessage: '实际运输方式'
                        })}>{conventEnumValueToString(claimTransportType, this.props.detail.actualTransportType)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.containerNumber',
                            defaultMessage: '集装箱号',
                        })}>{this.props.detail.containerNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.boxNumber',
                            defaultMessage: '纸箱号',
                        })}>{this.props.detail.boxNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.caseNumber',
                            defaultMessage: '箱号',
                        })}>{this.props.detail.caseNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.bLNumber',
                            defaultMessage: '提单号',
                        })}>{this.props.detail.bLNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.bLDate',
                            defaultMessage: '提单日期',
                        })}>{formatDateTime(this.props.detail.bLDate, DATE_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.status',
                            defaultMessage: '状态'
                        })}>{conventEnumValueToString(kDClaimStatus, this.props.detail.status)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.description',
                            defaultMessage: '索赔详细描述',
                        })}>{this.props.detail.description}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.remark',
                            defaultMessage: '备注',
                        })}>{this.props.detail.remark}</Description>
                    </DescriptionList>
                </Card>
                <Collapse>
                    <Panel header={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.approveTitle',
                            defaultMessage: '审核信息'
                        })
                    }</Col>
                    </Row>}>
                        <DescriptionList size="large">
                            <Description term={formatMessage({
                                id: 'detailPanel.data.approverName',
                                defaultMessage: '审核人',
                            })}>{this.props.detail.approverName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.approveTime',
                                defaultMessage: '审核时间',
                            })}>{formatDateTime(this.props.detail.approveTime, DATETIME_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.approveComment',
                                defaultMessage: '审核意见',
                            })}>{this.props.detail.approveComment}</Description>
                        </DescriptionList>
                    </Panel>
                </Collapse>
                <Collapse>
                    <Panel header={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.title',
                            defaultMessage: '基本信息'
                        })
                    }</Col>
                    </Row>}>
                        <DescriptionList size="large">
                            <Description term={formatMessage({
                                id: 'detailPanel.data.creatorName',
                                defaultMessage: '创建人',
                            })}>{this.props.detail.creatorName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.createTime',
                                defaultMessage: '申请日期',
                            })}>{formatDateTime(this.props.detail.createTime, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.modifierName',
                                defaultMessage: '修改人',
                            })}>{this.props.detail.modifierName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.modifyTime',
                                defaultMessage: '修改时间',
                            })}>{formatDateTime(this.props.detail.modifyTime, DATETIME_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.submitterName',
                                defaultMessage: '提交人',
                            })}>{this.props.detail.submitterName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.submitTime',
                                defaultMessage: '提交时间',
                            })}>{formatDateTime(this.props.detail.submitTime, DATETIME_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.judgerName',
                                defaultMessage: '责任判定人',
                            })}>{this.props.detail.judgerName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.judgerTime',
                                defaultMessage: '责任判定时间',
                            })}>{formatDateTime(this.props.detail.judgerTime, DATETIME_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.assayerName',
                                defaultMessage: '原因分析人',
                            })}>{this.props.detail.assayerName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.assayTime',
                                defaultMessage: '原因分析时间',
                            })}>{formatDateTime(this.props.detail.assayTime, DATETIME_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.discussantName',
                                defaultMessage: '升级讨论人',
                            })}>{this.props.detail.discussantName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.discussTime',
                                defaultMessage: '升级讨论时间',
                            })}>{formatDateTime(this.props.detail.discussTime, DATETIME_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.abandonerName',
                                defaultMessage: '作废人姓名',
                            })}>{this.props.detail.abandonerName}</Description>
                            <Description term={formatMessage({
                                id: 'detailPanel.data.abandonTime',
                                defaultMessage: '作废时间',
                            })}>{formatDateTime(this.props.detail.abandonTime, DATETIME_FORMAT)}</Description>
                        </DescriptionList>
                    </Panel>
                </Collapse>
                <Card
                    title={formatMessage({
                        id: 'detailPanel.operation.details',
                        defaultMessage: 'KD索赔清单'
                    })}>
                    <Collapse activeKey={details && details.length > 0 ? [details[0].id] : ['0']}>
                        {details && details.length > 0 ? details.map(item => <Panel
                            showArrow={false} header={item.kdBomCode} key={item.id}>
                            <DescriptionList size="large">
                            
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.quantity',
                                    defaultMessage: '索赔数量',
                                })}>{item.quantity}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.dutyUnitCode',
                                    defaultMessage: '责任单位编号',
                                })}>{item.dutyUnitCode}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.dutyUnitName',
                                    defaultMessage: '责任单位名称',
                                })}>{item.dutyUnitName}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.productCategoryCode',
                                    defaultMessage: '车型编号',
                                })}>{item.productCategoryCode}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.productCategoryName',
                                    defaultMessage: '车型名称',
                                })}>{item.productCategoryName}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.engineModel',
                                    defaultMessage: '发动机型号',
                                })}>{item.engineModel}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.transmissionModel',
                                    defaultMessage: '变速箱型号',
                                })}>{item.transmissionModel}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.engineCode',
                                    defaultMessage: '发动机号',
                                })}>{item.engineCode}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.transmissionSn',
                                    defaultMessage: '变速箱号',
                                })}>{item.transmissionSn}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.vehicleFrameCode',
                                    defaultMessage: '车架码',
                                })}>{item.vehicleFrameCode}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.mfgIsClaim',
                                    defaultMessage: '制造中心确认索赔',
                                })}>{item.mfgIsClaim ? formatMessage({
                                        id: 'detailPanel.column.y',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'detailPanel.column.n',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.mfgComment',
                                    defaultMessage: '制造中心意见',
                                })}>{item.mfgComment}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.planIsClaim',
                                    defaultMessage: '计划部确认索赔',
                                })}>{item.planIsClaim ? formatMessage({
                                        id: 'detailPanel.column.y',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'detailPanel.column.n',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.planComment',
                                    defaultMessage: '计划部意见',
                                })}>{item.planComment}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.qualityIsClaim',
                                    defaultMessage: '质管中心确认索赔',
                                })}>{item.qualityIsClaim ? formatMessage({
                                        id: 'detailPanel.column.y',
                                        defaultMessage: '是'
                                    }) : formatMessage({
                                        id: 'detailPanel.column.n',
                                        defaultMessage: '否'
                                    })}</Description>
                                <Description term={formatMessage({
                                    id: 'detailPanel.data.qualityComment',
                                    defaultMessage: '质管中心意见',
                                })}>{item.qualityComment}</Description>
                            </DescriptionList>
                            <div className={styles.description}>
                                <Table
                                    className="white-space-nowrap"
                                    columns={partColumns}
                                    rowKey="id"
                                    pagination={false}
                                    dataSource={item.partDetails}
                                    {...TABLE} />
                            </div>
                        </Panel>) : ''}
                    </Collapse>
                </Card>
                
                <Card title={formatMessage({
                    id: 'detail.details.claimDetails',
                    defaultMessage: '索赔资料附件清单'
                })}>
                    {claimDetails && claimDetails.length >= 0
                        ? <DescriptionList>
                            {claimDetails.map(item => (<Description key={item.fileId}>
                                <a icon="download" download href={`${FILES_API.files}/${item.fileId}`} size="small">
                                    {item.fileName}</a></Description>))}
                        </DescriptionList>
                        : <DescriptionList title={formatMessage({
                            id: 'detailPanel.content.noAttachment',
                            defaultMessage: '暂无附件'
                        })} />}
                </Card>
                <Card title={formatMessage({
                    id: 'detail.details.shippingDetails',
                    defaultMessage: '发运资料附件清单'
                })}>
                    {shippingDetails && shippingDetails.length >= 0
                        ? <DescriptionList>
                            {shippingDetails.map(item => (<Description key={item.fileId}>
                                <a icon="download" download href={`${FILES_API.files}/${item.fileId}`} size="small">
                                    {item.fileName}</a></Description>))}
                        </DescriptionList>
                        : <DescriptionList title={formatMessage({
                            id: 'detailPanel.content.noAttachment',
                            defaultMessage: '暂无附件'
                        })} />}
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPanel.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    detail: PropTypes.object.isRequired,
    id: PropTypes.string.isRequired,
    init: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    successReturn: PropTypes.func,
};

import {connect} from 'react-redux';
import {getDetail, tableSearch} from './actions';
import {injectIntl} from './intl';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDetailData = selectorFactory(['page', 'domainData', 'detail', 'data']);
const mapStateToProps = (state, props) => ({
    id: props.id,
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']),
    permissions: getPermissions(state),
    detail: getDetailData(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    init: () => dispatch(getDetail(props.id)),
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
